<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="__ADDONROOT__/js/myQuery.js"></script>

<style type="text/css">
    .controls{  height: 30px; position: relative;}
    #SWFUpload_0{left: 0;}
    .btn-close{
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
        cursor: pointer;
    }

    .btn-close:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }

    .upload-img-box .upload-pre-item{
        position: relative;
        margin-bottom: 8px;
        overflow: visible;
        float: left;
        height: 80px;
        margin: 5px;
    }
    .upload-img-box .upload-pre-item img{  height: 80px; border: 0;}

    /* 上传图片点击弹出层 */
    .upload-img-popup {
        position: fixed;
        z-index: 9999;
        padding: 3px;
        border: 1px solid #c3c3c3;
        background-color: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,.5);
    }

    .upload-img-popup img{
        display: inline-block;
        max-height: 300px;
        max-width: 300px;
        cursor: pointer;
    }

    .upload-img-popup .close-pop {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
    }
    .upload-img-popup .close-pop:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }
    .upload-img-popup img {
        display: block;
    }
    .upload_icon_all {
        width: 15px;
        height: 15px;
        background: url('__ADDONROOT__/images/attachment_1.png');
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px
    }

    .uploadify-queue{ display: none;

    }

    .bt-home-show{
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30px;
        width: 100%;
        background: #4E4747;
        line-height: 30px;
        z-index: 10;
        color: #fff;
    }
    .fengmian_div{
        width: 33px;
        position: absolute;
        left: 0;
        top: -8px;
        color: #E61818;
        z-index: 10;
        display: none;
    }
.selectImg{
    position: absolute;
    width: 50px;
    height: 30px;
    top: 0;
    border-left: solid 1px #7DC49B;
    left: 120px;
    background: #27AE60;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    border-radius: 0 5px 5px 0px;

}

</style>
<div id="tab1" class="tab-pane in tab1">
    <input type="hidden" name="fengmian_show" id="fengmian_show"  value="{$images}">
    <input type="hidden" name="fengmian_show_id" id="fengmian_show_id"  value="{$fengmian_show_id}">
    <div class="controls">
        <input type="file" id="upload_picture">
        <div class="selectImg">浏览</div>
        <div class="upload-img-box">
            <notempty name="picture">
                 <volist name="picture" id="picture">
                    <div class="upload-pre-item">
                        <img src="__ROOT__{$picture['path']}" data-id="{$picture['id']}"/>
                        <span class='btn-close' title='删除图片'></span>
                        <div class="bt-home-show" data-id="{$picture['id']}" style="display: none;" onclick="home_bt_event(this,'__ROOT__{$picture['path']}')">设置封面图片</div>
                        <div class="fengmian_div"
                             <if condition="$fengmian_show_id eq $picture['id']">
                                 style="display: block;"
                                 <else/>style="display: none;"
                                 </if>
                             >封面</div>
                        <input type="hidden" name="images[]" value="__ROOT__{$picture['path']}">
                    </div>
                  <input type="hidden" name="icon[]" value="{$picture['id']}" class="icon" />
                 </volist>
            </notempty>
        </div >
    </div>
</div>

{:hook('AdminPageFooter')}
<script type="text/javascript">
    //上传图片
    /* 初始化上传插件 */
    $("#upload_picture").uploadify({
        "height"          : 30,
        "swf"             : "__STATIC__/uploadify/uploadify.swf",
        "fileObjName"     : "download",
        "buttonText"      : "上传图片",
        "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
        "width"           : 120,
        'removeTimeout'   : 1,
        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
        "onUploadSuccess" : uploadPicture,
        'onFallback' : function() {
            alert('未检测到兼容版本的Flash.');
        }
    });
    function uploadPicture(file, data){
        var data = $.parseJSON(data);
        var src = '';
        if(data.status){
//            console.log('hello');
//            console.log(data.status);
//            console.log(data.id);



            //创建<div class="upload-pre-item">
            $_upload_item = $("<div class='upload-pre-item'></div>");
            src = data.url || '__ROOT__' + data.path;
            //创建img input close-btn
            $_img_path = $("<input type='hidden' name='icon[]' class='icon' value='"+data.id+"'/>");
            $_imgs = $("<input type='hidden' name='images[]'  value='"+src+"'/>");

            $_upload_img = $("<img data-id="+data.id+" src=" + src +"  title='点击显示大图' data-id="+data.id+">  " );
            $_img_del = $("<span class='btn-close' title='删除图片'></span>");
            $_home_bt=$("<div class='bt-home-show' >设置封面图片</div>")
            $_fengmian_div=$("<div class='fengmian_div'>封面</div>")
//            $_img_path.val(data.id);

            //加入到upload-img-box

            $_upload_item.append($_upload_img);
            $_upload_item.append($_img_del);
            $_upload_item.append($_home_bt);
            $_upload_item.append($_fengmian_div);
            $_upload_item.append($_imgs);
            $_upload_item.hover(function(){
                $(this).find(".bt-home-show").slideDown();
            },function(){
                $(this).find(".bt-home-show").eq(0).slideUp("fast");
            });

            $_home_bt.click(function(){

                home_bt_event(this,src);
            });
//            $_upload_item.append($_img_path);

            $("#tab1 .controls").append($_img_path);
//            $_upload_img.data("id",data.id);

            $(".icon").parent().find('.upload-img-box').append($_upload_item);


            if($(".upload-pre-item").size()<=1){
                $(".upload-pre-item").eq(0).find(".fengmian_div").show(500);
                var $_src=$(".upload-pre-item").eq(0).find("img:eq(0)").attr("src");
                var $_dataid=$(".upload-pre-item").eq(0).find("img:eq(0)").attr("data-id");
                $("#fengmian_show").val($_src);
                $("#fengmian_show_id").val($_dataid);
            }


        } else {
            updateAlert(data.info);
            setTimeout(function(){
                $('#top-alert').find('button').click();
                $(that).removeClass('disabled').prop('disabled',false);
            },1500);
        }
    }

    function home_bt_event(_this,src)
    {
       var dataid= $(_this).attr("data-id");
        $("#fengmian_show_id").val(dataid);
        $("#fengmian_show").val(src);
        $(_this).parent().siblings().find(".fengmian_div").hide(500)
        $(_this).parent().find(".fengmian_div").show(500);
    }


    $(function(){
        $(".upload-pre-item").hover(function(){
            $(this).find(".bt-home-show").slideDown();
        },function(){
            $(this).find(".bt-home-show").eq(0).slideUp("fast");
        });
    });

    function uploadPictureundefined(op,json){
        uploadPicture(null, json);
    }
</script>